<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
	<title>注册网易免费邮箱-中国第一大电子邮件服务商</title>
	<link rel="shortcut icon"  href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/rega.css">
</head>
<body>
<header class="header">
	<div class="bg"></div>
	<div class="links">
	<a href="#">了解更多|</a>
	<a href="#">反馈意见</a>
</div>
</header>
<section class="content">
	<header> 
		<h1 class="content-tit">欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
	</header>


<div class="main-wrapper">
	<!--左边表单区域-->
	<div class="mainBody">
		<div class="regTabs">
			<ul>
				<li><a	style="color: #fff" href="#">注册字母邮箱	</a></li>
				<li><a href="#">注册手机号码邮箱</a></li>
				<li><a href="#">注册VIP邮箱</a></li>
			</ul>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title">
					<span class="txt-imp">*</span>邮件地址
				</dt>
				<dd class="regForm-ct">
					<input type="text" value="" class="ipt">
					<span>@</span>
					<select>
						<option selected="selected">163.com</option>
					</select>
					<div class="ipt-tip">
						<span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
					</div>
				</dd>
			</dl>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title">
					<span class="txt-imp">*</span>密码
				</dt>
				<dd class="regForm-ct">
					<input type="text" value="" class="ipt" style="width: 322px;">
					<div class="ipt-tip">
						<span>6~16个字符，区分大小写</span>
					</div>
				</dd>
			</dl>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title">
					<span class="txt-imp">*</span>确认密码
				</dt>
				<dd class="regForm-ct">
					<input type="text" value="" class="ipt" style=" width: 322px;">
					<div class="ipt-tip">
						<span>请再次填写密码</span>
					</div>
				</dd>
			</dl>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title">
					<span class="txt-imp">*</span>手机号码
				</dt>
				<dd class="regForm-ct">
					<input  id="phone" type="text" value="+86" class="ipt" style=" width: 322px; font-size: 14px; font-weight: bold; padding-left: 40px;">
					<div class="itl" style="width:35px; height:27px; line-height: 27px;">
						<div class="flag flag-CN">
							<em>&nbsp;</em>
						</div>
					</div>

					<div class="select_panel">
						<a href="#" class="flag-CN" >
							<em></em>
							中国+86
						</a>
					<a href="#" class="flag-AL">
						<em></em>
					阿尔巴吉亚（Shqiperia) +335     
					</a>
				</div>
						
					
					<div class="ipt-tip">
						<span>忘记密码时，可以通过该手机号码快速找回密码</span>
					</div>
				</dd>
			</dl>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title">
					<span class="txt-imp">*</span>验证码
				</dt>
				<dd class="regForm-ct">
					<input type="text" value=""  class="ipt">
					<div class="ipt-tip">
						<span>请填写图片中的字符，不区分大小写</span>
					</div>
				</dd>
			</dl>
		</div>

		<div class="regForm">
			<dl class="regForm-item">
				<dt class="regForm-title"> 		
					<span class="txt-imp">*</span>短信验证码</dt>
				<dd class="regForm-ct">
					<input type="text" value="" class="ipt"  style="width: 322px;">
					<div class="ipt-tip">
						<span>请查收手机短信，并填写短信中的验证码</span>
                         <button>获取短信验证码</button>
					</div>
				</dd>
			</dl>
		</div>
<div style="text-align:center;">
  <input   type="checkbox" checked="checked" /> 同意"服务条款"和"隐私权相关政策"
  <br>
    <button >立即注册</button>
</div>
	</div>

    <!--右边广告区域-->
	<div class="mainBody-side">
	<img src="images/reg_master.gif">
	</div>
</div>
</section>


 


<script type="text/javascript">
	function select_flag(){
		var links=document.querySelectorAll(".select_panel a");
		for(i=0;i<links.length; i++){
			links[i].addEventListener("click", function(e){
				var target= e.target;
				var cls=target.className;
				var txt=target.innerText;

				var phone=  txt.substr(txt.indexOf("+"),txt.length-txt.indexOf("+")
					);
					document.getElementById('phone').setAttribute('value',phone);


					var div=document.querySelector('.flag');
					div.className="flag "+cls;
			})
		}
	}

select_flag();
function switchFlag(){
	var flag = document.querySelector('.itl');
	falg.addEventListener('click',function(e){
		var d = e.target;
		var panel = document.querySelector('.select_panel');
		panel.style.display==='none'?panel.style.display='block':panel.style.display ='none';

	})
}
function switchTab(){
	var tabs = document.querySelectorAll('.regTabs ul li a');
	var ul = document.querySelector('.regTabs ul');
	var panels = document.querySelectorAll('.regForm');

    for(var i=0;i<tabs.length;i++){
    	tabs[i].index =i;
    	panels[i].index=i;
    	tabs[i].addEventListener('click',function(e){
    		var a= e.target;
    		ul.style.background= "url(assets/images/tab.jpg) no-repeat 0 -"+a.index*56+"px" ;
    		for (var j=0;<tabs.length;j++){
    			tabs[j].style.color ="#000";

    			panels[j].style.display="none";
    		}
            a.style.color = '#fff';
            panels[a.index].style.display='block';
        }

    		}
    }
	}
}



</script>
</body>
</html>